<template>
  <div style="width: 100%;padding:10px">
    <div style="margin: 10px 0">
      <el-button type="primary" @click="add">新增</el-button>
      <el-button type="primary">导入</el-button>
      <el-button type="primary">导出</el-button>
      <el-input v-model="search" placeholder="请输入关键字" style="width: 20%;margin-left: 500px" clearable/>
      <el-button type="primary" style="margin-left: 10px" @click="load">查询</el-button>
    </div>

    <el-table :data="tableData" border  stripe style="width: 100%">
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="name" label="商店名称"  />
      <el-table-column prop="username" label="商家姓名"  />
      <el-table-column prop="identity" label="政治面貌"  />
      <el-table-column prop="achievement" label="业绩"  />
      <el-table-column prop="number" label="联系方式"  />
      <el-table-column prop="address" label="商店地址" />
      <el-table-column prop="style" label="犯错次数" />
      <el-table-column fixed="right" label="操作" width="200">

        <template #default="scope">
          <el-button type="primary" @click="handleEdit(scope.row)">编辑
          </el-button>


          <el-popconfirm title="确定要删除吗?" @confirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>

        </template>
      </el-table-column>
    </el-table>

    <div style="margin:10px 0">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5,10,20]"
          :page-size="pageSize"
          layout="total,sizes,prev,pager,next,jumper"
          :total="total">
      </el-pagination>


      <el-dialog
          v-model="dialogVisible"
          title="提示"
          width="30%"
      >
      <el-form :model="form" label-width="120px">
        <el-form-item  label="商店名称">
          <el-input v-model="form.name" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item label="商家姓名">
          <el-input v-model="form.username" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item :model="form" label="政治面貌">
          <el-radio v-model="form.identity" label="党员">党员</el-radio>
          <el-radio v-model="form.identity" label="群众">群众</el-radio>
        </el-form-item>
        <el-form-item label="商家业绩">
          <el-input v-model="form.achievement" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item  label="联系方式">
          <el-input v-model="form.number" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item  label="犯错次数">
          <el-input v-model="form.style" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item  label="经纬度地址">
          <el-input v-model="form.lnglat" style="width: 80%"></el-input>
        </el-form-item>
        <el-form-item :model="form" label="地址">
          <el-input type="textarea" v-model="form.address" style="width: 80%"></el-input>
        </el-form-item>
      </el-form>

        <template #footer>
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="save"
        >确定</el-button
        >
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script>


import request from "@/utils/request";

export default {
  name: 'HomeView',
  data(){
    return{
      dialogVisible:false,
      search:"",
      form:{},
      tableData:[
      ],
      currentPage:1,
      total:10,
      pageSize:10
    }
  },
  created() {
    this.load()
  },
  methods:{
    load(){
      request.get("/user",{
       params:{
         pageNum:this.currentPage,
         pageSize:this.pageSize,
         search:this.search
       }
      }).then(res => {
        this.tableData=res.data.records
        // console.log(this.tableData)
        this.total=res.data.total
      })
    },
    add(){
      this.dialogVisible=true;
      this.form={};
    },
    save(){
      if(this.form.id){
        request.put("/user",this.form).then(res => {
          if(res.code === '0'){
            this.$message({
              type:"success",
              message:"更新成功"
            })
          }else {
            this.$message({
              type:"error",
              message:res.msq
            })
          }
          this.load();
          this.dialogVisible=false
        })
      }else{
        request.post("/user",this.form).then(res => {
          if(res.code === '0'){
            this.$message({
              type:"success",
              message:"新增成功"
            })
          }else {
            this.$message({
              type:"error",
              message:res.msq
            })
          }
          this.load();
          this.dialogVisible=false
        })
      }
    },
    handleSizeChange(pageSize){
      this.pageSize=pageSize
      this.load()
      console.log(this.tableData)
    },
    handleCurrentChange(pageNum){
      this.currentPage=pageNum
      this.load()
    },
    handleEdit(row){
      this.form = JSON.parse(JSON.stringify(row));
      this.dialogVisible = true
    },
    handleDelete(id){
      request.delete("/user"+"/"+id,this.form).then(res =>{
        if(res.code === '0'){
          this.$message({
            type:"success",
            message:"删除成功"
          })
        }else {
          this.$message({
            type:"error",
            message:res.msq
          })
        }
        this.load();
      })
    }
  }
}
</script>
